<template>
  <div class="screen-manage" v-loading="loading">
    <el-button type="primary" @click="addSelector">新增</el-button>
    <template v-if="isDrag">
      <el-button type="primary" @click="saveDrag">保 存</el-button>
      <el-button @click="cancleSave">取 消</el-button>
    </template>
    <div class="content" v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
            <propsModule :label-name="item.name" :tableData="tableData" @dragChange="dragChange" @editProps="editProps" @delProps="delProps"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <addSelector
      :show.sync="show"
      :propsType="activeName"
      :selector="selector"
      @confirm="confirm"
      :propsItem="propsItem">
    </addSelector>
  </div>
</template>
<script>
import addSelector from './addSelector'
import propsModule from './propsModule'
export default {
    components: {
      addSelector,
      propsModule
    },
    data () {
        return {
            loading: false,
            show: false,
            isDrag: false,
            tableData: [],
            selector: [],
            activeName: '0',
            propsItem: {},
            tabs: [
                {
                    name: '0',
                    label: '热门类别'
                },
                {
                    name: '1',
                    label: '热门单品'
                }
            ]
        }
    },
    created () {
        this.getSelector()
        this.getList()
    },
    mounted () {
        // this.$dragging.$on('dragged', ({ value }) => {
        //     this.isDrag = true
        // })
    },
    methods: {
        tabChange (tab, event) {
            this.activeName = tab.name
            this.getList()
            this.getSelector()
        },
        async getList () {
            this.loading = true
            let res = await this.$http.get('/peace/selectPeaceSelectorLabel', {
                params: {
                    type: this.activeName
                }
            })
            if (res.code === '0') {
                this.tableData = res.data.peaceSelectorLabelVoList
                this.$set(this.tabs[0], 'label', `热门类别（${res.data.typeCount}）`)
                this.$set(this.tabs[1], 'label', `热门单品（${res.data.skinCount}）`)
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        async getSelector () {
            let res = await this.$http.post('/peace/selector', {
                type: this.activeName
            })
            if (res.code === '0') {
                this.selector = res.data.props
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
        },
        // 添加筛选
        addSelector () {
            this.show = true
            this.propsItem = {}
        },
        async addSelectorLabel (data) {
            let res = await this.$http.get('/peace/addPeaceSelectorLabel', { params: data })
            if (res.code === '0') {
                this.getList()
            } else {
                if (res.code === '80020') {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            }
            this.show = false
        },
        dragChange () {
            this.isDrag = true
        },
        // 保存排序
        saveDrag () {
            const data = []
            this.tableData.forEach((item, index) => {
                data.push({
                    id: item.id,
                    sort: index + 1
                })
            })
            this.$http.post('/peace/updatePeaceSelectorLabelSort', data).then((res) => {
                if (res.code === '0') {
                    this.$message.success('保存成功')
                    this.isDrag = false
                    this.getList()
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        // 编辑道具
        editProps (obj) {
            console.log(obj)
            this.propsItem = obj
            this.show = true
        },
        delProps (obj) {
            let data = JSON.parse(JSON.stringify(obj))
            data.status = 0
            this.addSelectorLabel(data)
        },
        cancleSave () {
            this.getList()
        },
        confirm (data) {
            this.addSelectorLabel(data)
        }
    }
}
</script>
<style lang="scss" scoped>
.screen-manage{
  .content{
    margin: 20px 0;
  }
}
</style>
